<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>观测数据</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
    <style>
        .imgimgimg{
            height: calc(100% - 50px);
            width: 80%;
            margin-left: 15%;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div class="needright" v-cloak>
    <div id="eChartsDiv" class="echarTopDiv">

    </div>

    <div class="ResultTop" id="main">
        <div id="backGroundImage" class="topSelect">
            <div class="topSelectHead">
                <div class="divIcon"></div>
                <span class="topSelectHeadSpan">{{$t('homeResultData.Water_quality')}} </span>
            </div>
            <div class="echarText"><span id="echartSpan">{{$t('homeResultData.Please_select')}} </span>
            </div>
            <div   class="eChartsDiv">
                <div class="baffle"   v-show="!echartShow">{{imagTitle}}</div>
                <img class="imgimgimg"   :src="imageSrc"  v-show="!echartShow" style=""/>
                <div class="timePlay" v-show="!echartShow">
                    <el-button type="primary" @click="timeplayFunction"   v-bind:icon="iconData"  >{{timePlayTitle}}</el-button>
                    <el-button type="primary " icon="el-icon-back" @click="timePlayValue--"></el-button>
                    <%--下一页--%>
                    <div class="block palyHeng">
                        <el-slider
                                v-model="timePlayValue"
                                :min="1"
                                :max="12"
                                :show-stops="true"
                                :format-tooltip="formatTooltip"
                                :marks="marks" >
                        </el-slider>
                    </div>
                    <el-button type="primary"  class="fenye"  icon="el-icon-right"  @click="timePlayValue++"></el-button> <%--上一页--%>
                </div>
            </div>
        </div>
            <div class="needleft">
                <!-- 左侧菜单栏 -->
                <div class="menuLeft" v-for="(menu,index) in menuLefts" @click="leftSwitch(index)"
                     v-bind:class="{menuLeftS: leftNum== index}">
                    <img v-bind:src="menu.url"/><br/>{{$t(menu.title)}}

                </div>
            </div>
            <div class="topSelectZindex" >

                <el-button type="primary" class="topSelectRight"  @click="loadData()" >{{$t('homeResultData.inquiry')}}  </el-button>

                <%--层数--%>
                <select-tier @send-tier="tierOptionValue=$event" v-show="echartShow"></select-tier>


                <%--模拟属性--%>
                <select-property-simulate
                        @send-property-simulate="siteTypeOptionValue=$event"  @send-property-simulate-entity="propertyInfo=$event" ></select-property-simulate>

                <%--站点--%>
                <select-site @send-site="siteOptionValue=$event" v-show="echartShow"></select-site>

                <el-date-picker class="topSelectRight"
                                v-model="imageTimeValue" v-show="!echartShow"
                        type="date"  :picker-options="startDateDisabled" >
                </el-date-picker>

                <el-date-picker class="topSelectRight" v-show="echartShow&&!dynamicVisible"
                                v-model="dateValue"
                                type="daterange"
                                range-separator="-"
                                :start-placeholder="$t('homeResultData.begtime')"
                                :end-placeholder="$t('homeResultData.endtime')">
                                :picker-options="startDateDisabled">
                </el-date-picker>

                <%--文件类别--%>
                <select-file-his :onemonth="0"  @send-file-his="fileOptionValue=$event" @send-file-his-entity="fileInfo=$event"  v-show="echartShow"></select-file-his>

                <select-file-map @send-file-his="fileOptionValue=$event" @send-file-his-entity="fileInfo=$event"  v-show="!echartShow"></select-file-map>
                    <div v-show="echartShow">
                        <el-button type="primary" v-show="!dynamicVisible"    class="topSelectRight" @click="addHardward()">{{$t('homeResultData.Compare_observation')}}  </el-button>
                    </div>

            </div>

        <el-dialog title="请选择需要展示的数据"  :visible.sync="layerChangeVisible" width="25%">
            <el-checkbox-group v-model="checkList"  v-for="(menu,index) in fileArray" >
                <el-checkbox  :label="menu.fileName"   @change="checked=>changeCharts(checked,menu)"  v-if="showNot(menu)"  border  class="checkBoxDiv"></el-checkbox> <br/>
            </el-checkbox-group>

            <div slot="footer" class="dialog-footer"  >
                <el-button type="primary"    @click="layerChangeVisible=false"> ok</el-button>
            </div>
        </el-dialog>

            <div class="ResultButtom"  v-show="echartShow">
                <!-- 下面依然是表格 -->

                <div class="topSelect hightAout">
                    <div class="topSelectHead">
                        <div class="divIcon"></div>
                        <span class="topSelectHeadSpan">数据</span>
                    </div>
                    <div class="eChartsDiv" style="height: auto">

                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column type="index" :label="$t('homeResultData.number')" width="120">
                            </el-table-column>
                            <el-table-column prop="hisSite" :label="$t('homeResultData.Site')">
                            </el-table-column>
                            <el-table-column prop="hisTier" :label="$t('homeResultData.Floor')">
                            </el-table-column>
                            <el-table-column prop="hisRemark" :label="$t('homeResultData.Attributes')">
                            </el-table-column>
                            <el-table-column prop="hisTime" :formatter="common.dateFormatTime" :label="$t('homeResultData.time')">
                            </el-table-column>
                            <el-table-column prop="hisValue" :label="$t('homeResultData.value')">
                            </el-table-column>
                            <%--<el-table-column prop="operation" label="操作">--%>
                            <%--<a style="color: #0CBDD7;">查看详情</a>--%>
                            <%--&lt;%&ndash;<a style="color: #0CBDD7;">地图</a>&ndash;%&gt;--%>
                            <%--</el-table-column>--%>
                        </el-table>
                        <div class="rightTableFoot">
                            <el-pagination background layout="prev, pager, next" :total="pageCount"
                                           @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

</body>


<script src="${contextPath}/js/echarts.min.js"></script> <!-- 统计图 -->
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vue-resource.js"></script>

<%--语言库--%>
<script src="${contextPath}/js/language/languages.js"  type="text/javascript" charset="utf-8"></script>

<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>
<%--组件 得在实例化前面--%>
<script src="${contextPath}/js/homeJS/component.js"></script>

<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>
<script src="${contextPath}/js/homeJS/homeResultData.js"></script>


</html>
